<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function  defineReactive(obj, key, value){
            //我们需要对value进行深层次的处理
            observe(value)

            Object.defineProperties(obj,key,{
                get:function rectiveGetter(){
                    console.log("我们可以再这个里边收集依赖项放在dep数组中。。。。");
                   return value;  
                },
                set :function reactiveSetter(newVal){
                    console.log("通知所有的依赖项，重新去拿值，因为我更新了");
  
                    value = newVal;
                }
            })
        }
        function observe(obj){
            if(typeof obj !== "object" || obj === null)return;

            for (let key of Object.keys(obj)){
                defineReactive(obj, key, obj[key]); 
            }
        }

        const vm = {
            _data: {
          name: "laowang",
          count: 0,
          movies: [
            { id: "001", movieName: "绿皮书" },
            { id: "002", movieName: "迷雾" },
          ],
          wea: {
            type: "下雨",
            num: 28,
          },
        }
        }
        observe(vm._tata)


    </script>
</body>
</html>